<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Admin Dashboard Template">
    <meta name="keywords" content="admin,dashboard">
    <meta name="author" content="stacks">
    <!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title -->
    <title>海苔系统登入页面</title>
        <!-- Styles -->
        {% load static %}
        <link href="{% static 'css/css.css' %}" rel="stylesheet">
        <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
        <link href="{% static 'css/all.min.css' %}" rel="stylesheet">
        <link href="{% static 'css/perfect-scrollbar.css' %}" rel="stylesheet">
        <link href="{% static 'css/pace.css' %}" rel="stylesheet">
        <link href="{% static 'css/error.message.css' %}" rel="stylesheet">
        <!-- Theme Styles -->
        <link href="{% static 'css/main.min.css' %}" rel="stylesheet">
        <link href="{% static 'css/custom.css' %}" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!--调用jquery-->
    
</head>
<body class="login-page">

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col-md-12 col-lg-4">
            <!-- 提示信息容器 -->
            <div id="alert-container" class="alert-container">
                {% if form.errors %}
                    <div class="alert alert-error">
                        <strong>提示:</strong>
                        <ul>
                            {% for field, errors in form.errors.items %}
                                {% for error in errors %}
                                    <li>{{ error }}</li>
                                {% endfor %}
                            {% endfor %}
                        </ul>
                        <button class="close-btn" onclick="closeAlert()">✖</button>
                    </div>
                {% endif %}
                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags }}">
                            {{ message }}
                            <button class="close-btn" onclick="closeAlert()">✖</button>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
            <div class="card login-box-container">
                <div class="card-body">
                    <div class="authent-logo">
                        <a href="#">海台系统</a>
                    </div>
                    <div class="authent-text">
                        <p>Seamount System</p>
                        <p>请输入您的登入账号</p>
                    </div>
                    <form method="post" role="form" id="form_login" action="{% url 'authApp:login' %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            <div class="form-floating">
                                <input type="email" name="email" class="form-control" id="floatingInput"
                                       placeholder="name@example.com">
                                <label for="floatingInput">邮箱地址</label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-floating">
                                <input type="password" name="password" class="form-control" id="floatingPassword"
                                       placeholder="Password">
                                <label for="floatingPassword">账户密码</label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" placeholder="验证码" aria-label="login captcha"
                                       name="captcha" aria-describedby="button-addon2">
                                <a href="#" class="captcha">
                                    <img src="{{ captcha.image_url }}" alt="点击切换" id="id_captcha">
                                </a>
                                <input type="hidden" value="{{ captcha.hashkey }}" name="hashkey" id="id_captcha_key">
                            </div>
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="exampleCheck1" value="0"
                                   name="remember">
                            <label class="form-check-label" for="exampleCheck1">记住密码</label>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-info m-b-xs" id="btnLogin">登入</button>
                            <a href="{% url 'authApp:register' %}" class="btn btn-primary">注册</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- Javascripts库 -->
    {% load static %}
    <script src="{% static 'js/jquery-3.4.1.min.js' %}" async></script>
    <script src="{% static 'js/core@2.js' %}" async></script>
    <script src="{% static 'js/bootstrap.min.js' %}" async></script>
    <script src="{% static 'js/feather-icons.js' %}" async></script>
    <script src="{% static 'js/perfect-scrollbar.min.js' %}" async></script>
    <script src="{% static 'js/pace.min.js' %}" async></script>
    <script src="{% static 'js/main.min.js' %}" async></script>
    <script src="{% static 'js/login.captcha.js' %}" async></script>
    <script src="{% static 'js/error.message.js' %}" async></script>
</body>
</html>